<template>
  <div>
    <m-shelf :title="order_number">
      <div slot="content">
        <div v-loading="loading" element-loading-text="加载中..." style="min-height: 10vw;" v-if="orderInfo">
          <div class="orderStatus" v-if="orderInfo.status < 5">
            <el-steps  :active="orderInfo.status + 1" finish-status="success" align-center >
              <el-step title="下单"></el-step>
              <el-step title="付款"></el-step>
              <el-step title="发货"></el-step>
              <el-step title="交易成功"></el-step>
            </el-steps>
          </div>
          <div class="orderStatus-close" v-if="orderInfo.status === 5">
            <el-steps :active="2">
              <!-- <el-step title="下单" v-bind:description="createTime"></el-step>
              <el-step title="订单取消" v-bind:description="closeTime"></el-step> -->
              <el-step title="下单"></el-step>
              <el-step title="订单取消"></el-step>
            </el-steps>
          </div>
          <div class="status-now" v-if="orderInfo.status === 0">
            <ul>
              <li class="status-title"><h3>订单状态：待付款</h3></li>
              <li class="button">
                <el-button @click="orderPayment(orderInfo.order_number, orderInfo.total)" type="primary" size="small">现在付款</el-button>
                <el-button @click="cancelOrder(orderInfo.id)" size="small">取消订单</el-button>
              </li>
            </ul>
          </div>
          <div class="status-now" v-if="orderInfo.status === 1">
            <ul>
              <li class="status-title"><h3>订单状态：已支付，等待发货</h3></li>
            </ul>
            <p class="realtime">
              <span>将在48小时之内为您发货，请耐心等待。</span>
            </p>
          </div>
          <div class="status-now" v-if="orderInfo.status === 2">
            <ul>
              <li class="status-title"><h3>订单状态：已发货，等待送达</h3></li>
            </ul>
            <p class="realtime">
              <span>货品到达之后请及时签收</span>
            </p>
          </div>
          <div class="status-now" v-if="orderInfo.status === 3">
            <ul>
              <li class="status-title"><h3>订单状态：已完成</h3></li>
            </ul>
            <p class="realtime">
              <span>您的订单已交易成功，感谢您的惠顾！</span>
            </p>
          </div>
          <div class="status-now" v-if="orderInfo.status === 4 ">
            <ul>
              <li class="status-title"><h3>订单状态：已退款</h3></li>
            </ul>
            <p class="realtime">
              <span>您的订单已退款，请注意款项是否已到账户</span>
            </p>
          </div>
          <div class="status-now" v-if="orderInfo.status === 5 ">
            <ul>
              <li class="status-title"><h3>订单状态：已取消</h3></li>
            </ul>
            <p class="realtime">
              <span>您的订单已取消。</span>
            </p>
          </div>

          <div class="gray-sub-title cart-title">
            <div class="first">
              <div>
                <span class="order-id">商品名称</span>
              </div>
              <div class="f-bc">
                <span class="price">单价</span>
                <span class="num">数量</span>
                <span class="operation">小计</span>
              </div>
            </div>
          </div>

          <!--商品-->
          <div class="goods-table">
            <div class="cart-items" v-for="(item,i) in orderInfo.goods_info" :key="i">
              <a @click="goodsDetails(item.goods_id)" class="img-box"><img :src="'http://127.0.0.1:8000/' + item.mp_good.goods_Bigimg" alt=""></a>
              <div>
                <a @click="goodsDetails(item.goods_id)" title="" target="_blank">{{ item.mp_good.goods_name }}</a>
              </div>
              <div class="n-b">
                <div class="price">¥ {{Number(item.goods_price).toFixed(2)}}</div>
                <div class="goods-num">{{item.goods_number}}</div>
                <div class="subtotal"> ¥ {{Number(item.goods_total_price).toFixed(2)}}</div>
              </div>
            </div>
          </div>
          <!--合计-->
          <div class="order-discount-line">
            <p style="font-size: 14px;font-weight: bolder;"> <span style="padding-right:47px">商品总计：</span>
              <span style="font-size: 16px;font-weight: 500;line-height: 32px;">¥ {{ orderInfo.total }}</span>
            </p>
            <p><span style="padding-right:30px">运费：</span><span style="font-weight: 700;">+ ¥ 0.00</span></p>
            <p class="price-total"><span>应付金额：</span><span class="price-red">¥ {{ orderInfo.total }}</span></p>
          </div>

          <div class="gray-sub-title cart-title">
            <div class="first">
              <div>
                <span class="order-id">收货信息</span>
              </div>
            </div>
          </div>
          <div style="height: 205px;padding: 20px 30px;">
            <p class="address">姓名：{{ orderInfo.consignee }}</p>
            <p class="address">联系电话：{{ orderInfo.phone }}</p>
            <p class="address">详细地址：{{ orderInfo.address }}</p>
            <p class="address">快递编号：{{ orderInfo.kuaidi_number }}</p>
          </div>
        </div>
        <div v-loading="loading" element-loading-text="加载中..." v-else>
          <div style="padding: 100px 0;text-align: center">
            获取该订单信息失败
          </div>
        </div>
      </div>
    </m-shelf>
  </div>
</template>

<script>
import MShelf from '../../../components/shelf.vue'

import { getOrderDetail, pay, updateOrderStatus } from '../../../api/order'

export default {
  name: 'orderDetail',
  props: {
    order_number: {
      required: true
    }
  },
  data() {
    return {
      // 订单信息
      orderInfo: null,
      // 收货地址
      addrInfo: null,
      // 订单加载效果
      loading: true,
    }
  },
  computed: {

  },
  created() {
    this.orderDetail()
  },
  methods: {
    // 查看订单详情
    async orderDetail() {
      const { data: res } = await getOrderDetail(this.order_number)
      
      if(res.code !== 0) {
        return this.$notify.error({
          title: '警告',
          message: '获取订单信息失败'
        })
      }

      res.result.goods_info = res.result.mp_order_goods
      delete res.result.mp_order_goods

      this.orderInfo = res.result
      console.log(this.orderInfo)
      this.loading = false
    },
    // 支付函数
    async orderPayment(order_number, total) {
      const { data: res } = await pay({id: order_number, total})
      window.open(res.result)
    },
    // 取消订单
    async cancelOrder(id) {
      // 弹框支付须知
      const confirmResult = await this.$confirm('确认取消订单吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      if (confirmResult !== 'confirm') {
        return 
      }

      const { data: res } = await updateOrderStatus(id, { status: 5 })

      if(res.code !== 0) {
        return this.$notify.error({
          title: '警告',
          message: '更新订单状态失败'
        })
      }

      this.orderDetail()
    }
  },
  components:{
    MShelf
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/style/mixin";

.orderStatus {
  width: 900px;
  margin: 50px -150px 20px 60px;
}

.orderStatus-close {
  width: 900px;
  margin: 50px -150px 20px 60px;
}

.status-now {
  background: #F6F6F6;
  border: 1px solid #dadada;
  border-radius: 5px;
  padding: 22px 30px 20px;
  margin: 0 30px 30px 30px;
  line-height: 38px;
}

.status-title {
  font-size: 18px;
  color: #666;
}

.button {
  float: right;
  margin: -37px 0 20px 0;
}

.realtime {
  border-top: 1px solid #dcdcdc;
  margin-top: 20px;
  padding-top: 26px;
}

.red {
  color: #d44d44;
}

.address {
  line-height: 38px;
  word-wrap: break-word;
  word-spacing: normal;
  word-break: break-all;
  color: #626262;
}

.img-box {
  border: 1px solid #EBEBEB;
  margin-left: -90px;
}

img {
  display: block;
  @include wh(80px);
}

.goods-table {
  .n-b {
    display: flex;
    align-items: center;
    justify-content: center;
    > div {
      color: #626262;
      font-weight: 700;
      margin-left: -12px;
      width: 165px;
      text-align: center;
    }
  }
  .cart-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 110px;
    padding: 15px 0 15px 111px;
    border-bottom: 1px solid #EFEFEF;
    a {
      color: #333;
    }
  }
  .price {
    padding-left: 80px;
  }
  .goods-num {
    padding-left: 35px;
  }
}

.order-discount-line {
  padding: 22px 30px 20px;
  line-height: 24px;
  text-align: right;
  font-size: 12px;
  &:first-child {
    line-height: 32px;
    text-align: right;
    font-size: 14px;
    font-weight: bolder;
  }
}

.gray-sub-title {
  height: 38px;
  padding: 0 24px;
  background: #EEE;
  border-top: 1px solid #DBDBDB;
  border-bottom: 1px solid #DBDBDB;
  line-height: 38px;
  font-size: 12px;
  color: #666;
  display: flex;
  span {
    display: inline-block;
    height: 100%;
  }
  .first {
    display: flex;
    justify-content: space-between;
    flex: 1;
    .f-bc {
      > span {
        width: 130px;
        text-align: center;
      }
    }
  }
  .last {
    width: 230px;
    text-align: center;
    display: flex;
    border-left: 1px solid #ccc;
    span {
      flex: 1;
    }
  }
}

.bt {
  border-top: 1px solid #EFEFEF;
}

.date {
  padding-left: 0px;
}

.order-id {
  margin-left: 10px;
}

.cart {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  &:hover {
    .del-order {
      display: block;
    }
  }
  .del-order {
    display: none;
  }
  .cart-l {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 15px 0;
    justify-content: space-between;
    position: relative;
    &:before {
      position: absolute;
      content: ' ';
      right: -1px;
      top: 0;
      width: 1px;
      background-color: #EFEFEF;
      height: 100%;
    }
    .img-box {
      border: 1px solid #EBEBEB;
    }
    img {
      display: block;
      @include wh(80px);
    }
    .cart-l-r {
      display: flex;
      > div {
        text-align: center;
        width: 112px;
      }
    }
    .car-l-l {
      display: flex;
      align-items: center;
    }
  }
  .cart-r {
    width: 230px;
    display: flex;
    span {
      text-align: center;
      flex: 1;
    }
  }
}

.prod-operation {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 254px;
  div {
    width: 100%;
    text-align: center;
  }
  div:last-child {
    padding-right: 24px;
  }
}

.price-total {
  height: 54px;
  line-height: 54px;
  font-size: 18px;
}

.price-red {
  font-weight: 700;
  color: #d44d44;
}
</style>